<template>
    <div class="container">
      <h1>请选择您要处理的模块</h1>
      <div class="button-group">
        <button @click="handleClick('人员')">人员</button>
        <button @click="handleClick('设备')">设备</button>
        <button @click="handleClick('规程')">规程</button>
      </div>
      <p>{{ selectedModule }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        selectedModule: ''
      };
    },
    methods: {
      handleClick(moduleName) {
        this.selectedModule = moduleName;
        // 这里可以添加处理逻辑，例如跳转到相应的页面或执行其他操作
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
  text-align: center;
  padding-top: 20px; /* 增加顶部padding */
}

.button-group button {
  margin-right: 10px;
  border-radius: 5px; /* 添加圆角边框 */
  background-color: lightseagreen; /* 设置背景颜色为浅绿色 */
  color: white; /* 设置文字颜色为白色 */
  font-size: 16px; /* 调整字体大小 */
  padding: 10px 20px; /* 调整内边距 */
  cursor: pointer; /* 改变鼠标指针形状 */
}

/* 添加悬停效果 */
.button-group button:hover {
  opacity: 0.8;
}
  </style>
  